<template>
  <div class="article-details">
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.push({ path: '/' })"/>
    <div class="article-container">
      <h3>{{ articles.title }}</h3>
      <div class="article-hd">
        <van-image
          round
          width="40"
          height="40"
          :src="articles.aut_photo"
        />
        <div class="article-name">
          <p>{{ articles.aut_name }}</p>
          <p class="time">{{ _formatTime(articles.pubdate) }}</p>
        </div>
        <!--             type="default" -->
        <div class="attention">
          <van-button
            @click="toggleAttention"
            round
            type="default"
            size="small">{{ articles.is_followed ?  '已关注' : '+关注' }}</van-button>
        </div>
      </div>
      <!-- 内容 -->
      <div class="article-content">
        <div v-html="articles.content"></div>
      </div>
      <!-- 分割线 -->
      <van-divider>END</van-divider>
      <div class="praise">
        <!-- 实体赞 good-job -->
        <van-button
          @click="togglePraise"
          :icon="articles.attitude === 1 ? 'good-job' : 'good-job-o'"
          size="small"
          type="info"
          plain
          round>{{ articles.attitude === 1 ? '已点赞' : '点赞' }}</van-button>
      </div>
    </div>
    <!-- 评论组件 -->
    <Comment />
  </div>
</template>

<script>
// 引入文章相关接口 文章详情、关注、取消关注、点赞、取消点赞
import { articleDetails, attention, unfollow, addLike, delLike } from '@/api/article'
// 引入评论组件
import Comment from '../ArticleDetail/components/Comment'
export default {
  name: 'ArticleDetails',
  components: {
    Comment
  },
  data () {
    return {
      articles: {} // 文章详情
    }
  },
  mounted () {
    this.getArticleDetails()
  },
  methods: {
    // 获取文章详情
    getArticleDetails () {
      const id = this.$route.query.id
      articleDetails(id).then(res => {
        // console.log(res.data.data)
        this.articles = res.data.data
      })
    },
    // 切换关注
    toggleAttention () {
      // console.log(1)
      // 如果是true就是已经关注了，再次点击所以是取消关注
      if (this.articles.is_followed) {
        unfollow(this.articles.aut_id).then(res => {
          this.$toast.success('取消关注成功')
        })
      } else {
        attention(this.articles.aut_id).then(res => {
          this.$toast.success('关注成功')
        })
      }
      // 无论是点击了什么我都对 this.articles.is_followed 取反
      this.articles.is_followed = !this.articles.is_followed
    },
    // 切换点赞
    togglePraise () {
      if (this.articles.attitude === 1) {
        delLike(this.articles.art_id.toString()).then(res => {
          console.log(res)
          this.$toast.success('取消点赞成功')
        })
      } else {
        addLike(this.articles.art_id.toString()).then(res => {
          console.log(1)
          console.log(res)
          this.$toast.success('点赞成功')
        })
      }
      this.articles.attitude = this.articles.attitude * -1
    }
  }
}
</script>

<style lang="less" scoped>
.article-details {
  position: absolute;
  left: 0;
  top: 0;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}
.article-container {
  padding: 10px;

  h3 {
    font-size: 18px;
  }
  .article-hd {
    display: flex;
    padding: 10px 0;

    .article-name {
      margin-left:10px;
      font-size: 16px;
      p {
        margin: 0;
      }
      .time {
        font-size: 12px;
        color: gray;
      }
    }
    .attention {
      margin-left: auto;
    }
  }
  // 内容
  .article-content {
    overflow: hidden;
    font-size: 18px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  // 点赞
  .praise {
    display: flex;
    justify-content: center;
  }
}
</style>
